<!--
 * @页面名称:菜单权限
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="menuManage">
    <!-- 按钮组 -->
    <!-- <div class="button-group">
      <el-button @click="save" type="primary">保存</el-button>
    </div> -->
    <div>
      <ztree :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onCreated="onCreated"></ztree>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import Ztree from "@/components/ztree/Ztree.vue";

const { proxy } = useCurrentInstance();
// 父级表格数据
const tabClickFromParent = ref();
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "MNU_ID",
        pIdKey: "MNU_Parent"
      },
      key: {
        checked: "MNU_IsCheck",
        name: "MNU_Title"
      }
    },
    check: {
      enable: true
    },
    view: {
      showIcon: false
    }
  },
  treeData: [],
  ztreeObj: {} as any
});
// 获取菜单数据
const getMenuData = (record: any) => {
  tabClickFromParent.value = record;
  proxy.$vueAxios.get("MasterPermission/GetRolePermissionMenus", { gid: record.G_ID }).then((res: any) => {
    treeSetting.treeData = res.List;
  });
};
// ztree初始化事件
const onCreated = (ztreeObj: any) => {
  treeSetting.ztreeObj = ztreeObj;
};
// 删除菜单
const delMenu = async () => {
  await proxy.$vueAxios.post("Master_Base_Permission_Menus/DeleteByColumnName", {
    columnName: "G_ID",
    ids: [tabClickFromParent.value.G_ID]
  });
};
// 新增菜单
const addMenu = async (arr: any) => {
  const param = [] as any;
  arr.forEach((item: any) => {
    param.push({
      mnU_ID: item.MNU_ID,
      g_ID: tabClickFromParent.value.G_ID,
      pM_ID: proxy.$global.createID(),
      pM_Create_By: tabClickFromParent.value.G_Create_By
    });
  });
  await proxy.$vueAxios.post("Master_Base_Permission_Menus/AddList", param);
};
// 保存
const save = async () => {
  const treeArray = treeSetting.ztreeObj
    .transformToArray(treeSetting.ztreeObj.getCheckedNodes())
    .filter((v: any) => v.MNU_IsCheck === true);
  await delMenu();
  await addMenu(treeArray);
};
// 将函数暴露给父组件
defineExpose({ getMenuData, save });
</script>

<style scoped lang="scss">
.menuManage {
  height: calc(100vh - 38px);
  padding-right: 6px;
  margin-left: 10px;
  overflow-y: scroll;
}
</style>
